<template>
  <div class="avatar-uploader">
    <el-upload :action="uploadImgUrl" :headers="headers" :on-success="quillImgSuccess" show-file-list="false">
      <img style="width: 80px;height: 80px;" v-if="imagesURL || props.imageUrl"
        :src="props.imageUrl ? props.imageUrl : imagesURL" class="avatar" />
      <div class="upImgBox" v-else>
        <el-icon class="avatar-uploader-icon">
          <Plus />
        </el-icon>
        <!-- <div>{{ imgUpText }}</div> -->
      </div>
    </el-upload>

  </div>
</template>

<script lang="ts" setup>
import { Session } from '/@/utils/storage';
import { ref, watch } from "vue";
import { Plus } from "@element-plus/icons-vue";
interface Props {
  imageUrl?: string; // 回显图片地址
  action?: string; //   上传地址
  imgText?: string; //   文字可以不传
  imgUpText?: string; // 上传按钮的文字
  disabledType?: boolean; // 是否禁用上传
}
const props = withDefaults(defineProps<Props>(), {
  imageUrl: "",
  action: "/activity/resource/uploadFile",
  imgText: "支持jpg/jpeg/png；文件大小不能超过2M；",
  imgUpText: "上传图标",
  disabledType: false,
});
const uploadImgUrl = import.meta.env.VITE_API_URL + "/api/v1/system/upload/upImg"; // 上传的图片服务器地址
const headers = { Authorization: `Bearer ${Session.get('token')}` }
const imagesURL = ref<string>(props.imageUrl);
const emits = defineEmits(["customEvent"]);

const quillImgSuccess = (res: any) => {
  // res为图片服务器返回的数据
  imagesURL.value = res.data.fileInfo.fileUrl;
  emits("customEvent", res.data);
};

watch(
  () => props.imageUrl,
  () => {
    imagesURL.value = props.imageUrl;
  }
);
</script>

<style lang="scss" scoped>
:deep().avatar-uploader {
  .avatar {
    width: 60px;
    height: 60px;
    display: block;
  }

  .el-upload {
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: 0.2s;
    background: rgba(0, 0, 0, 0.04) !important;
  }

  .el-upload:hover {
    border-color: #14b194;
  }
}

.el-icon.avatar-uploader-icon {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.45);
  text-align: center;
}

.upImgBox {
  width: 104px;
  height: 104px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  padding-top: 24px;
  box-sizing: border-box;
}

.upImgText {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 4px;
}
</style>
